<template>
  <div class="confirmsc">
    <div class="toper">
      <div class="head">
        <div class="title">简报制作</div>
        <div class="desc">半自动化生成或舆情分析报告<i></i></div>
      </div>
      <div class="liuchen">
        <div class="left">
          <step :data='2'></step>
        </div>
        <div class="right">
          <div class="num">
            <b>{{total}}</b>
            <div class="desc">已选择信息</div>
          </div>
          <div class="edit">
            <div class="generate" @click="nextstep()">生成简报</div>
            <div class="choose">挑选素材</div>
            <div class="desc"><i>*</i>生成简报后将被删除</div>
          </div>
        </div>
      </div>
    </div>
    <div class="space"></div>
    <div class="bodyer">
      <div class="title">编辑简报素材</div>
      <div class="handle">
        <el-checkbox class="checkbox" @change="checkAll()" v-model="checkAllFlag"></el-checkbox>
        <el-button @click="empty()">清空素材</el-button>
        <el-button @click="sort='asc'">时间升序</el-button>
        <el-button @click="sort='desc'">时间降序</el-button>
        <el-button class="right" @click="delcheck()">批量删除</el-button>
      </div>
      <div class="news">
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="checkbox">
            <el-checkbox v-model="item.checked"></el-checkbox>
          </div>
          <div class="content">
            <div class="main">
              <div class="pic">
                <div class="img"  v-bind:style="{backgroundImage:item.urlimg}"></div>
                <div class="label">{{item.webSite.substring(0,8)}}</div>
              </div>
              <div class="text">
                <div class="head">
                  <div class="title" v-html="filterHtml(item.title)" @click="queryarticle(item)"></div>
                  <div class="qx">倾向性: <TendLabel :tend="parseInt(item.positiveOrNegative)"></TendLabel></div>
                </div>
                <div class="body" v-html="filterHtml(item.content)"></div>
              </div>
            </div>
            <div class="imgbtns">
              <div class="imbtn del" @click="deleteone(item,index)">删除</div>
            </div>
          </div>
          <div class="time">
            <div>{{item.poTime|fomartDate(item.poTime)}}</div>
            <div>{{item.poTime|fomartTime(item.poTime)}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import step from './step'
import TendLabel from 'components/common/TendLabel'
import moment from 'moment'
export default {
  name:'confirmsc',
  components: {step,TendLabel},
  data(){
    return{
      list:[],
      total:0,
      pageNum:1,//第几页
      pageSize:30,//条数
      checkAllFlag:false,
      sort:'desc'
    }
  },
  mounted(){
    this.querybriefing()
  },
  filters:{
    fomartDate:function(time){
      return moment(parseInt(time)).format('YYYY-MM-DD')
    },
    fomartTime:function(time){
      return moment(parseInt(time)).format('HH:mm:ss')
    },
  },
  watch:{
    sort(){
      this.querybriefing()
    }
  },
  methods:{
    filterHtml(value){
      return value.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
    },
    checkAll(){
      this.list.map(d=>d.checked = this.checkAllFlag)
    },
    empty(){
      localStorage.Temporarymaterial = ''
      this.list = []
    },
    deleteone(item,index){
      let arr = JSON.parse(localStorage.Temporarymaterial)
      arr = arr.filter(d => d!=item.id)
      localStorage.Temporarymaterial = JSON.stringify(arr)
      this.list = this.list.filter((d,i)=>{return i!=index})
      this.querybriefing()
    },
    delcheck(){
      this.list = this.list.filter(d => d.checked!=true)
      let arr = JSON.parse(localStorage.Temporarymaterial)
      let _list = this.list.map(d => d.id)
      arr = arr.filter(d=>_list.includes(d))
      localStorage.Temporarymaterial = JSON.stringify(arr)
      this.querybriefing()
    },
    nextstep(){
      this.$router.push('/brief/choosestyle');
    },
    queryarticle(item){
      let count = 0
      if (item.doc_count&&item.doc_count==1) {
        this.$store.commit('setxxcount',{
          count:1
        });
      }
      let id = item.id
      console.log(item)
      let pirnt = item.titleContentPrint
      this.$store.dispatch('queryarticle',{
        id:id,
        keywords:this.keywords,
        titleContentPrint:pirnt,
        count:count
      });
    },
    async querybriefing(){
      let arr = []
      if(localStorage.Temporarymaterial){
        arr = JSON.parse(localStorage.Temporarymaterial)
      }
      let res = await this.$http.post('vrv-monitor-platform-web/data/queryByIds',{
        ids:arr.join(','),
        sortType:this.sort
      })
      this.list = res.body.data
      this.total = res.body.total
      this.list.map((d)=>{
        this.$set(d,'checked', false) 
        let imgurl = d.domain
        this.$http.get(`static/${imgurl}.png`).then(res=>{
          this.$set(d,'urlimg', `url(static/${imgurl}.png)` )
        }).catch(err=>{
          this.$set(d,'urlimg',"url('static/defult.png')")
        })
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
  .toper
    height 250px
    padding 30px
    box-sizing border-box
    >.head
      height 40px
      font-size 0
      border-bottom 1px solid #dcdcdc 
      box-sizing border-box
      .title
        display inline-block
        font-size 1.3rem
        color #555
        font-weight bold
      .desc
        display inline-block
        margin-left 8px
        font-size 0.88rem
        color #999
        i
          display inline-block
          margin-left 8px
          width 14px
          height 14px
          background-image url('img/brief-why.png')
          background-repeat no-repeat
          background-size cover
    .liuchen
      margin-top 38px
      font-size 0
      display flex
      .left
        flex 1
      .right
        width 250px
        font-size 0
        .num
          float left
          b
            display block
            font-size 40px
            color #e75a46
            text-align center
          .desc
            font-size 18px
            color #333
        .edit
          float right
          >div
            width 120px
            height 34px
            color #fff
            background-position 10% 55%
            font-size 12px
            line-height 34px
            text-indent 40px
            background-repeat no-repeat
            &.generate
              background-color #e85a47
              background-image url(img/generate.png)
              border-radius 8px
            &.choose
              background-color #e85a47
              background-image url(img/choose.png)
              border-radius 8px
              margin-top 10px
          .desc
            font-size 12px
            color #999
            text-indent 0
            >i
              display inline-block
              color #e85a47
              line-height 34px
  .space
    height 10px
    background #f0f5fb
  .bodyer
    >.title
      padding 20px 30px
      font-size 20px
      color #333
      box-sizing border-box
    >.handle
      height 50px
      line-height 50px
      background #f6f6f6
      padding-left 10px
      >.checkbox
        margin-right 40px
      >.right
        float right
        margin-right 50px
    .news
      .item
        height 160px
        border 1px solid #dcdcdc
        display flex
        .checkbox
          width 70px
          padding-left 10px
          padding-top 10px
          box-sizing border-box
        .time
          width 150px
          >div
            text-align center
            color #333
            font-size 14px
            &:first-of-type
              margin-top 50px
        .content
          flex 1
          border-left 1px solid #dcdcdc
          border-right 1px solid #dcdcdc
          .main
            display flex
            height 120px
            .pic
              width 145px
              border-right 1px solid #dcdcdc
              text-align center
              >.img
                width 60px
                height 60px
                border 1px solid #dcdcdc
                border-radius 50%
                margin 5px auto
                margin-top 20px
                background-repeat no-repeat
                background-size 100%
            .text
              flex 1
              padding 15px 30px
              .head
                overflow hidden
                height 35px
                line-height 35px
                .title
                  color #000
                  float left
                  font-size 0.88rem
                  cursor pointer
                .qx
                  float right
                  color #666
              .body
                padding-top 0.8rem
                color #666
                font-size 0.88rem
                line-height 1.9rem
                height 60px
                overflow hidden
          .imgbtns
            height 40px
            border-top 1px solid #dcdcdc
            .imbtn
              float right
              height 30px
              line-height 30px
              margin-top 5px
              border-left 1px solid #dcdcdc
              padding  0 45px
              font-size 14px #666
              cursor pointer
              &.del
                background url(img/brief-del.png) no-repeat
                background-position 10% 50%
.pagination
  text-align right
  padding 0.93rem 0.93rem

</style>


